<template>
	<!-- 预存管理 -->
	<view class="wp">
		<view class="nav_title">{{info.info.supname}}</view>
		<view class="p_head">
			<view class="title">该店剩余可消费额度</view>
			<view class="money">{{info.info.usemoney}}元</view>
			<view class="record" @click="$navTo('../business/collectionrecord')">查看消费明细></view>
			<view class="refund">
				<text>折现比例 {{info.info.discount}}折</text>
				<text>可退回现金 {{info.info.price}}</text>
			</view>
		</view>
		<view class="p_body">
			<view class="list_item">
				<view class="title">
					<text class="name">累计充值</text>
					<text class="color_1" @click="$navTo('../user/dlconsumeshop?uid='+uid)">查看记录></text>
				</view>
				<view class="list_li">
					<view class="left">
						<text>【商家累计实收】{{info.usemoney}}元</text><text>(共{{info.num}}笔)</text>
					</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>【累计充值额度】{{info.allmoney}}元</text>
					</view>
				</view>
				<!-- <view class="list_li">
					<view class="left">
						<text>【上次预存通过时间】2515151515151</text>
					</view>
				</view> -->
			</view>

			<view class="list_item">
				<view class="title">
					<text class="name">预存款申请<text> 可用消费额小于3天时，建议申请</text></text>
				</view>
				<view class="list_li">
					<view class="left">
						<text>预存现金</text>
					</view>
					<view class="input">
						<uni-easyinput type="number" v-model="money" :clearable="false" :inputBorder="false"
							placeholder="输入充值现金" />
					</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>商家赠送额度</text>
					</view>
					<view class="input">
						<uni-easyinput type="number" v-model="givemoney" :clearable="false" :inputBorder="false"
							placeholder="商家赠送的额度" />
					</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>实际折扣</text>
					</view>
					<view style="font-size: 26upx;color: #8405dc;font-weight: bold;">{{discountMoney}}</view>
				</view>
				<view class="left">
				<text style="font-size: 24upx;color: #888;">实际折扣=预存现金÷(预存现金+赠送额度)</text>
				</view>
				<view class="list_li">
					<view class="left">
						<text>充值额度</text>
					</view>
					<view style="font-size: 26upx;color: #8405dc;font-weight: bold;">{{czPrice}}</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>转款证明</text>
					</view>
					<view class="color_1" @click="uploadImage">上传图片凭证</view>
				</view>
				<view class="list_li1" v-if="thumb">
					<image :src="thumb" ></image>
				</view>
				<view class="buttons">
					<button class="button_2" size="mini" @click="submitCZ">已向商家付款，提交额度申请</button>
				</view>
			</view>

			<view class="list_item" v-if="!Array.isArray(TKinfo)">
				<view class="title">
					<text class="name">门店申请退款<text>门店退还预存余额</text></text>
				</view>
				<view class="list_li">
					<view class="left">
						<text>退还现金<text style="font-size: 24upx;">(门店退还上次预存余额)</text></text>
					</view>
					<view>{{TKinfo.money}}元</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>退还折现比例<text style="font-size: 24upx;">(上次预存折现比例)</text></text>
					</view>
					<view>{{TKinfo.discount}}折</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>门店可消费额度</text>
					</view>
					<view class="color_2">{{TKinfo.usemoney}}元</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>门店退还现金凭证</text>
					</view>
					<view class="color_3" @click="preImage(TKinfo.thumb)">查看凭证</view>
				</view>
				<view class="buttons">
					<button class="button_2" size="mini" @click="tuiKuanTap">已收到退还现金，扣除门店可消费额度</button>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(["url"])
		},
		data() {
			return {
				uid: '',
				info: {
					allmoney: 0,
					info: {
						discount: "",
						price: 0,
						usemoney: "",
						supname: ''
					},
					num: 0,
					usemoney: 0,
				},
				TKinfo: [],
				money: '',
				givemoney: '',
				discountMoney: 0,
				czPrice: 0,
				thumb: ''
			}
		},
		watch: {
			money: function(v) {
				let money = this.money !== '' ? this.money * 1 : 0;
				let givemoney = this.givemoney !== '' ? this.givemoney * 1 : 0;
				let allmoney = money + givemoney;
				this.czPrice = '+' + allmoney.toFixed(2);
				this.discountMoney = money === 0 ? 0 : (money / allmoney).toFixed(7);
			},
			givemoney: function(v) {
				let money = this.money !== '' ? this.money * 1 : 0;
				let givemoney = this.givemoney !== '' ? this.givemoney * 1 : 0;
				let allmoney = money + givemoney;
				this.czPrice = '+' + allmoney.toFixed(2);
				this.discountMoney = money === 0 ? 0 : (money / allmoney).toFixed(7);
			},
		},
		onLoad(option) {
			this.uid = option.uid;
			this.getInfo();
			this.getTKInfo();
		},
		methods: {
			getInfo() {
				this.$axios('money/supInfo', 'POST', 'member', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getTKInfo() {
				this.$axios('money/tkinfo', 'POST', 'member', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.TKinfo = res.data.data;
					}
				})
			},
			submitCZ() {
				if (this.money > 0) {} else {
					this.$api.msg('预存现金需大于0');
					return;
				}
				if (!this.thumb) {
					this.$api.msg('请完善申请信息');
					return;
				}
				this.$axios('money/chognzhi', 'POST', 'member', {
					uid: this.uid,
					money: this.money,
					givemoney: this.givemoney,
					thumb: this.thumb
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '提交成功！'
						});
						setTimeout(() => {
							this.$navBack();
						}, 300)
					}
				})
			},
			tuiKuanTap() {
				this.$axios('money/tuikuan', 'POST', 'member', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '操作成功！'
						})
						setTimeout(() => {
							this.$navRed('../user/dlrecharge?uid=' + this.uid);
						}, 700)
					}
				})
			},
			uploadImage() {
				let that = this;
				uni.chooseImage({
					sizeType: 'original',
					success(chooseImage) {
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						let token = uni.getStorageSync('token');
						uni.uploadFile({
							url: that.url.upload,
							filePath: chooseImage.tempFilePaths[0],
							name: 'a',
							header: {
								token: token
							},
							formData: {
								'file': 'a'
							},
							success(res) {
								let data = JSON.parse(res.data);
								if (data.code == 200) {
									that.thumb = data.data.url;
									uni.showToast({
										title: '上传成功',
									})
								} else {
									uni.showToast({
										title: '上传失败请重试',
										icon: 'none'
									})
								}
							},
							fail() {
								uni.showToast({
									title: '上传失败请重试',
									icon: 'none'
								})
							},
							complete() {
								uni.hideLoading();
							}
						})
					}
				})
			},
			preImage(v) {
				let that = this;
				uni.previewImage({
					urls: [v],
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.wp {
		letter-spacing: 1px;
	}

	.nav_title {
		color: #000;
		font-size: 30upx;
		font-weight: bold;
		line-height: 80upx;
		text-align: center;
	}

	.p_head {
		background: repeating-linear-gradient(45deg,#000000 0,#000000 4px,#0d0d0d 0,#0d0d0d 8px);
		color: #f3dd91;
		font-size: 26upx;
		font-weight: bold;
		letter-spacing: 2px;
		padding: 20upx;

		.money {
			font-size: 42upx;
			padding: 30upx 0;
			text-align: center;
		}
		.record{
			font-size: 30upx;
			padding: 4upx 0 18upx 0;
			text-align: center;
		}
		.refund {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.p_body {
		padding: 0 20upx 100upx;
		overflow: hidden;

		.list_item {
			background: #fff;
			border-radius: 20upx;
			color: #303133;
			margin-top: 30upx;
			padding: 20upx;

			.title {
				border-bottom: 1px #DCDFE6 solid;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30upx;
				font-weight: bold;
				margin-bottom: 20upx;
				padding-bottom: 20upx;

				.name {
					font-size: 32upx;
					color: #000;

					text {
						color: #666;
						font-size: 24upx;
						margin-left: 10upx;
					}
				}

				.time {
					color: #666;
					font-size: 26upx;
					font-weight: normal;
				}
			}

			.list_li,
			.left,
			.list_li1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 55upx;

				.left {
					justify-content: flex-start;
					color: #303133;

					text:nth-of-type(2) {
						margin-left: 20upx;
					}
				}
			}

			.list_li1 {
				justify-content: flex-start;
				flex-wrap: wrap;

				image {
					border-radius: 15upx;
					height: 120upx;
					margin: 20upx 20upx 20upx 0;
					width: 120upx;
				}
			}

			.color_w {
				color: #303133;
			}

			.color_1 {
				color: #927419;
			}

			.color_2 {
				color: $bg-color;
			}

			.color_3 {
				color: rgb(49, 12, 187);
			}

			.warn {
				border-top: 1px #DCDFE6 solid;
				color: rgb(245, 5, 5);
				font-size: 26upx;
				line-height: 45upx;
				margin: 20upx 0;
			}

			.buttons {
				border-top: 1px #DCDFE6 solid;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-top: 20upx;
				padding: 40upx 0 20upx;

				button {
					width: 90%;
				}

				.button_1 {
					background: rgb(151, 1, 1);
					color: #fff;
				}

				.button_2 {
					background: rgb(9, 72, 1);
					color: #fff;
				}
			}
		}
	}

	.input {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.uni-easyinput .uni-easyinput__content-input {
		text-align: right;
		padding-right: 0 !important;
	}
</style>